<template>
  <div class="singer-intro">
    <div>
      <h2>简介</h2>
      <div>{{ desc }}</div>
    </div>
    <div>
      <h2>基本资料</h2>
      <div>
        <div v-for="(item,index) in basicItem" :key="index">
            <span> {{item.key}}:</span>
            <span style="white-space:pre-wrap">{{item.value}}</span></div>
      </div>
    </div>
    <div v-for="(item,index) in otherItem" :key="index">
        <h2>{{item.key}}</h2>
        <span style="white-space:pre-wrap">{{item.value}}</span>
    </div>
  </div>
</template>
<style>
.singer-intro{
    text-align: left;
    padding:0 1rem;
}
</style>
<script>
export default {
  props: ["singerId"],
  data() {
    return {
      desc: "", //简介描述
      basicItem: [], //基本资料
      otherItem: [], //其他
    };
  },
  created() {
    this.getData();
  },
  methods: {
    getData() {
      this.$request("get", "/singer/desc?"+
        "singermid="+this.singerId,
      ).then((res) => {
        console.log(res);
        this.desc = res.data.desc;
        this.baseicItem = res.data.basic.item;
        this.otherItem = res.data.other.item;
      });
    },
  },
};
</script>